<template>
    <div id="Identify">
        <button
            id="TencentCaptcha"
            class="captcha"
            v-bind:data-appid="captchaAppID"
            data-cbfn="captcha"
            type="button"
        >
            点击验证
        </button>
    </div>
</template>

<script>
    import TencentCaptcha from 'TencentCaptcha'
    import Axios from 'axios'

    export default {
        name: "Identify",
        props: {
            captchaAppID: {
                type: String,
            }
        },
        data() {
            return {
                // 建立初始化验证码功能配置表
                captchaOptions: {
                    enableDarkMode: true,   // 自适应深夜模式
                    sdkOpts: {
                        width: 350,
                        height: 350
                    },                      // 设置弹框大小
                    ready: {
                        sdkView: {
                            width: 50,
                            height: 25
                        }
                    },                      // 设置验证码大小
                    needFeedBack: false     // 隐藏帮助按钮
                },
                ticketForm: {
                    ticket: '',
                    rand: '',
                    userIp: ''
                }
            }
        },
        methods: {
            // sendPost(ticketForm){
            //     Axios.post('http://pms.xybh.online/verify',
            //         ticketForm,
            //         {  // 方式2通过 transformRequest 方法发送数据，本质还是将数据拼接成字符串
            //             transformRequest: [
            //                 function(data){
            //                     let params = ''
            //                     for(let index in data){
            //                         params += index + '=' + data[index] + '&'
            //                     }
            //                     return params
            //                 }
            //             ]
            //         }
            //     ).then(resp => {
            //         console.log(resp.data)
            //     }).catch(err => {
            //         console.log('请求失败：' + err.status + ',' + err.statusText)
            //     });
            // },
            sendPost: function (ticketForm) {
                return (
                    Axios.post('http://pms.xybh.online/verify',
                        ticketForm,
                        {  // 方式2通过 transformRequest 方法发送数据，本质还是将数据拼接成字符串
                            transformRequest: [
                                function(data){
                                    let params = ''
                                    for(let index in data){
                                        params += index + '=' + data[index] + '&'
                                    }
                                    return params
                                }
                            ]
                        }
                    ).then(resp => {
                        console.log(resp.data)
                    }).catch(err => {
                        console.log('请求失败：' + err.status + ',' + err.statusText)
                    })
                )
            }
        },
        created: function() {
            // 建立验证码回调函数
            window.captcha = function(res){
                console.log(res)
                // res（用户主动关闭验证码）= { ret: 2, ticket: null }
                // res（验证成功） = { ret: 0, ticket: "String", randstr: "String" }
                if(res.ret === 0){
                    // alert('验证成功，验证票据为：\n' + res.ticket)                // 打印票据

                    // 发送 Post 请求进行二次验证
                    // let ticketForm = {
                    //     ticket: res.ticket,
                    //     rand: res.randstr,
                    //     userIp: res.appid
                    // }
                    // // 为啥没法调用methods方法？？？？？？？
                    // console.log(this.sendPost(ticketForm))

                    Axios.post('http://pms.xybh.online/verify',
                        {
                            ticket: res.ticket,
                            rand: res.randstr,
                            userIp: res.appid
                        },
                        {  // 方式2通过 transformRequest 方法发送数据，本质还是将数据拼接成字符串
                            transformRequest: [
                                function(data){
                                    let params = ''
                                    for(let index in data){
                                        params += index + '=' + data[index] + '&'
                                    }
                                    return params
                                }
                            ]
                        }
                    ).then(resp => {
                        console.log(resp.data)
                    }).catch(err => {
                        console.log('请求失败：' + err.status + ',' + err.statusText)
                    });
                }
                else if(res.ret === 2){
                    alert('用户主动关闭验证码窗口，验证票据为：\n' + res.ticket)   // 打印票据

                    // 对应处理操作
                }
            }
        },
        updated: function () {
            // 设定验证APP值
            let captchaAppId = this.props.captchaAppID

            // 初始化验证码挂载
            // eslint-disable-next-line no-unused-vars
            new TencentCaptcha(
                captchaAppId,
                window.captcha,
                this.captchaOptions
            )
        }
    }
</script>

<style scoped>
    #Identify{
        position: absolute;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    #TencentCaptcha{
        position: relative;
        margin: 0;
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        background-color: #00A1FF;
        color: #ffffff;
        cursor: pointer;
        transition: 0.6s;
    }
    #TencentCaptcha:hover{
        background-color: #0E60FF;
    }
    #Identify:hover>#TencentCaptcha{
        animation: DialogOpen 0.8s infinite;
        -webkit-animation: DialogOpen 0.8s infinite; /* Safari 和 Chrome */
        animation-iteration-count: 1;
        -webkit-animation-iteration-count: 1;
    }

    @keyframes DialogOpen {
        0% {
            -webkit-transform: matrix3d(.805, 0, 0, 0, 0, .7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.805, 0, 0, 0, 0, .7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            opacity: 1
        }
        3.4% {
            -webkit-transform: matrix3d(.835, 0, 0, 0, 0, .822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.835, 0, 0, 0, 0, .822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        4.7% {
            -webkit-transform: matrix3d(.875, 0, 0, 0, 0, .88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.875, 0, 0, 0, 0, .88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        6.81% {
            -webkit-transform: matrix3d(.918, 0, 0, 0, 0, .968, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.918, 0, 0, 0, 0, .968, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        9.41% {
            -webkit-transform: matrix3d(.965, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.965, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        10.21% {
            -webkit-transform: matrix3d(.982, 0, 0, 0, 0, 1.068, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.982, 0, 0, 0, 0, 1.068, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        13.61% {
            -webkit-transform: matrix3d(1.037, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.037, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        14.11% {
            -webkit-transform: matrix3d(1.042, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.042, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        17.52% {
            -webkit-transform: matrix3d(1.062, 0, 0, 0, 0, 1.072, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.062, 0, 0, 0, 0, 1.072, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        18.72% {
            -webkit-transform: matrix3d(1.064, 0, 0, 0, 0, 1.056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.064, 0, 0, 0, 0, 1.056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        21.32% {
            -webkit-transform: matrix3d(1.059, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.059, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        24.32% {
            -webkit-transform: matrix3d(1.045, 0, 0, 0, 0, .988, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.045, 0, 0, 0, 0, .988, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        25.23% {
            -webkit-transform: matrix3d(1.04, 0, 0, 0, 0, .981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.04, 0, 0, 0, 0, .981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        29.03% {
            -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, .969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.019, 0, 0, 0, 0, .969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        29.93% {
            -webkit-transform: matrix3d(1.014, 0, 0, 0, 0, .97, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.014, 0, 0, 0, 0, .97, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        35.54% {
            -webkit-transform: matrix3d(.994, 0, 0, 0, 0, .989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.994, 0, 0, 0, 0, .989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        36.74% {
            -webkit-transform: matrix3d(.991, 0, 0, 0, 0, .994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.991, 0, 0, 0, 0, .994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        41.04% {
            -webkit-transform: matrix3d(.988, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.988, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        44.44% {
            -webkit-transform: matrix3d(.99, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.99, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        52.15% {
            -webkit-transform: matrix3d(.997, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(.997, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            opacity: 1
        }
        59.86% {
            -webkit-transform: matrix3d(1.002, 0, 0, 0, 0, .997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.002, 0, 0, 0, 0, .997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        63.26% {
            -webkit-transform: matrix3d(1.002, 0, 0, 0, 0, .998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.002, 0, 0, 0, 0, .998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        75.28% {
            -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        85.49%,
        90.69%,
        100% {
            -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        100% {
            opacity: 1
        }
    }
</style>
